<template>
  <div class="loginbox cc-display" id="outboxlogin" @click="displayBox">
    <div
      id="insideboxlogin"
      style="
        width: 500px;
        height: 500px;
        background-color: #fff;
        border-radius: 6px;
        overflow: hidden;
      "
      @click="displayBlock($event)"
    >
      <div class="topline"></div>
      <div style="width: 100%; height: 80px" class="cc-display">
        <div style="width: 50%; height: 100%" class="cc-display">
          <span class="font20f">账号登录</span>
        </div>
        <div
          style="width: 50%; height: 100%; background-color: #eee"
          class="cc-display"
        >
          <span class="font20g">第三方登录</span>
        </div>
      </div>
      <div style="width: 100%; height: 100px" class="ce-display">
        <div
          style="
            width: 10%;
            height: 50px;
            background-color: #eee;
            border-radius: 6px 0 0 6px;
            border: 1px solid #ccc;
            border-right: 0;
          "
          class="cc-display border-none"
        >
          <img src="imgs/loginbox/user.png" style="width: 25px; height: 25px" />
        </div>
        <input
          style="
            width: 70%;
            height: 50px;
            border-radius: 0 6px 6px 0;
            border: 1px solid #ccc;
            border-left: 0;
            padding-left: 5px;
          "
          placeholder="用户名/邮箱"
          class="border-none font16g"
          v-model="userInput.userNo"
        />
      </div>
      <div style="width: 100%; height: 100px" class="cc-display">
        <div
          style="
            width: 10%;
            height: 50px;
            background-color: #eee;
            border-radius: 6px 0 0 6px;
            border: 1px solid #ccc;
            border-right: 0;
          "
          class="cc-display border-none"
        >
          <img src="imgs/loginbox/lock.png" style="width: 25px; height: 25px" />
        </div>
        <input
          style="
            width: 70%;
            height: 50px;
            border-radius: 0 6px 6px 0;
            border: 1px solid #ccc;
            border-left: 0;
            padding-left: 5px;
          "
          placeholder="请输入密码"
          type="password"
          class="border-none font16g"
          v-model="userInput.password"
        />
      </div>
      <div style="width: 100%; height: 50px" class="cc-display">
        <div
          style="
            width: 10%;
            height: 50px;
            background-color: #eee;
            border-radius: 6px 0 0 6px;
            border: 1px solid #ccc;
            border-right: 0;
          "
          class="cc-display border-none"
        >
          <img
            src="imgs/loginbox/shield.png"
            style="width: 25px; height: 25px"
          />
        </div>
        <input
          style="
            width: 25%;
            height: 50px;
            border-radius: 0 6px 6px 0;
            border: 1px solid #ccc;
            border-left: 0;
            padding-left: 5px;
          "
          placeholder="验证码"
          class="border-none font16g"
          v-model="userInput.verifyCode"
        />
        <img
          src="imgs/loginbox/close.png"
          style="width: 5%; height: auto; margin-left: 2.5%; margin-right: 2.5%"
        />
        <img src="imgs/loginbox/example.png" style="width: 35%; height: 50px" />
      </div>
      <div style="width: 100%; height: 90px" class="ce-display">
        <div
          id="login-submit"
          style="
            width: 35%;
            height: 50px;
            background-color: #00A1D6;
            margin-right: 5%;
            border-radius: 6px;
            box-shadow: 0 0 3px #eee;
          "
          class="cc-display mouseon"
          @click="submitLogin"
        >
          <span class="font20c">&nbsp;登录</span>
        </div>
        <div
          style="
            width: 35%;
            height: 50px;
            background-color: #FF5C7C;
            margin-left: 5%;
            border-radius: 6px;
            box-shadow: 0 0 3px #eee;
          "
          class="cc-display mouseon"
        >
          <span class="font20c">&nbsp;注册</span>
        </div>
      </div>
      <div style="width: 100%; height: 50px" class="cc-display">
        <div
          style="width: 35%; height: 50px; margin-right: 5%"
          class="cc-display"
        >
          <img
            src="imgs/loginbox/question.png"
            style="width: 16px; height: 16px; margin-top: 4px"
          />
          <span class="font16g">&nbsp;忘记密码</span>
        </div>
        <div
          style="width: 35%; height: 50px; margin-left: 5%"
          class="cc-display"
        >
          <img
            src="imgs/loginbox/ionicexit.png"
            style="width: 18px; height: 16px; margin-top: 4px"
          />
          <span class="font16g">&nbsp;注销账号</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "LoginBox",
  props: {
    textin: String
  },
  data() {
    return {
      userInput: {
        userNo: "",
        password: "",
        verifyCode: ""
      }
    };
  },
  created() {},
  methods: {
    /**
     * @method displayBlock 隐藏登录框
     */
    displayBox() {
      this.$store.commit("changeIsLoginBox", false); //vuex 移除登录框
    },
    /**
     * @method displayBlock 阻断登录框内的点击移除页面
     */
    displayBlock(e) {
      e.stopPropagation();
    },

    /**
     * @method submitLogin 登录提交
     */
    submitLogin() {
      this.axios
        .post(`submit`, {
          userNo: this.userInput.userNo,
          password: this.userInput.password,
          verifyCode: this.userInput.verifyCode
        })
        .then(res => {
          if (res.data.errCode && res.data.errCode == "success") {
            this.$store.commit("changeIsLoginBox", false); // 移除登录框
            this.$userinfo = res.data.data; // 用户信息写入全局变量
            this.$store.commit("changeIsLogin", {
              flag: true,
              userName: this.$userinfo.userName
            }); // 登录状态
            // localStorage.setItem("isLoginFlag", true);
            // localStorage.setItem("isLoginUserName", this.$userinfo.userName);
            return;
          }
          this.$message.error("登录失败，用户名或密码错误！");
        })
        .catch(err => {
          console.log(err);
          this.$message.error("登录失败，系统异常！");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.loginbox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 201;
}

.topline {
  width: 100%;
  height: 8px;
  background-image: linear-gradient(
    to right,
    rgb(255, 90, 87),
    rgba(252, 186, 42, 0.25)
  );
}

.mouseon {
  cursor: pointer;
}
</style>
